<template>
	<view>
		<view class="address-management" :class="addressList.length < 1 && page > 1 ? 'fff' : ''">
			<view class="line"><image src="../../../static/images/line.jpg" v-if="addressList.length"></image></view>
			<radio-group class="radio-group" @change="radioChange" v-if="addressList.length">
				<view class="item" v-for="(item, index) in addressList" :key="index">
					<view class="address" @click="goOrder(item.address_id)">
						<view class="consignee">
							{{i18n.Consignee}} : {{ item.real_name }}
							<text class="phone">{{ item.phone }}</text>
						</view>
						<view>{{i18n.ShippingAdd}} : {{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</view>
					</view>
					<view class="operation acea-row row-between-wrapper">
						<radio class="radio" :value="index" :checked="item.is_default ? true : false"><text>设为默认</text></radio>
						<view class="acea-row row-middle">
							<view @click="editAddress(item.address_id)">
								<text class="iconfont iconbianji"></text>
								{{i18n.Edittheaddress}}
							</view>
							<view @click="delAddress(index)">
								<text class="iconfont iconshanchu"></text>
								{{i18n.Deletetheaddress}}
							</view>
						</view>
					</view>
				</view>
			</radio-group>
			<view class="loadingicon acea-row row-center-wrapper" v-if="addressList.length">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view class="noCommodity" v-if="addressList.length < 1 && page > 1">
				<view class="pictrue"><image src="../../../static/images/noAddress.png"></image></view>
			</view>
			<view style="height:120rpx;"></view>
			<view class="footer acea-row row-between-wrapper">
				<!-- #ifdef APP-PLUS -->
				<view class="addressBnt bg-color on" @click="addAddress">
					<text class="iconfont icontianjiadizhi"></text>
					{{i18n.addnewadd}}
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-->
				<view class="addressBnt bg-color" @click="addAddress">
					<text class="iconfont icontianjiadizhi"></text>
					{{i18n.addnewadd}}
				</view>
				<!-- <view class='addressBnt wxbnt' @click='getWxAddress'><text class='iconfont iconweixin'></text>导入微信地址</view> -->
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
const globalData = getApp().globalData;
import { getWechatConfig } from '@/api/public.js';
import { getAddressList, setAddressDefault, delAddress, editAddress, postAddress } from '@/api/user.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			addressList: [],
			cartId: '',
			pinkId: 0,
			couponId: 0,
			loading: false,
			loadend: false,
			loadTitle: globalData.$t('user_address_list').LoadMore,
			page: 1,
			limit: 20
		};
	},
	computed: {
		i18n() {
			return globalData.$t('user_address_list');
		},
		...mapGetters(['isLogin'])
	},
	onLoad(options) {
		if (this.isLogin) {
			this.cartId = options.cartId || '';
			this.pinkId = options.pinkId || 0;
			this.couponId = options.couponId || 0;
			this.getAddressList(true);
		} else {
			this.isAuto = true;
			this.$set(this, 'isShowAuth', true);
		}
	},
	onShow: function() {
		let that = this;
		that.getAddressList(true);
	},
	methods: {
		/*
		 * 导入微信地址（小程序）
		 */
		getWxAddress: function() {
			let that = this;
			uni.authorize({
				scope: 'scope.address',
				success: function(res) {
					console.log(res, 'success');
					uni.chooseAddress({
						success: function(res) {
							console.log(res, 'res');
							let addressP = {};
							addressP.province = res.provinceName;
							addressP.city = res.cityName;
							addressP.district = res.countyName;
							editAddress({
								is_default: 1,
								real_name: res.userName,
								buyer_name: res.buyer_name,
								buyer_id_no: res.buyer_id_no,
								detail: res.detailInfo,
								province: res.provinceName,
								district: res.countyName,
								city: res.cityName,
								city_id: ''
							})
								.then(res => {
									that.$util.Tips(
										{
											title: that.i18n.AddCg,
											icon: 'success'
										},
										function() {
											that.getAddressList(true);
										}
									);
								})
								.catch(err => {
									return that.$util.Tips({
										title: err
									});
								});
						},
						fail: function(res) {
							if (res.errMsg == 'chooseAddress:cancel')
								return that.$util.Tips({
									title: that.i18n.XuxOption
								});
						}
					});
				},
				fail: function(res) {
					uni.showModal({
						title: that.i18n.Jujie,
						content: that.i18n.Shif,
						success(res) {
							if (res.confirm) {
								uni.openSetting({
									success: function(res) {
										console.log(res.authSetting);
									}
								});
							} else if (res.cancel) {
								return that.$util.Tips({
									title: that.i18n.Yixux
								});
							}
						}
					});
				}
			});
		},
		/*
		 * 导入微信地址（公众号）
		 */
		getAddress() {
			let that = this;
			jweixin.openAddress({
				success: function(res) {
					editAddress({
						real_name: res.userName,
						phone: res.telNumber,
						province: res.provinceName,
						buyer_name: res.buyer_name,
						buyer_id_no: res.buyer_id_no,
						city: res.cityName,
						district: res.countryName,
						detail: res.detailInfo,
						post_code: res.postalCode,
						is_default: 1,
						city_id: ''
					})
						.then(() => {
							that.$util.Tips(
								{
									title: that.i18n.AddCg,
									icon: 'success'
								},
								function() {
									// close();
									that.getAddressList(true);
								}
							);
						})
						.catch(err => {
							// close();
							return that.$util.Tips({
								title: err || that.i18n.Addsn
							});
						});
				},
				fail: function(err) {
					console.log(err, 'err');
				},
				cancel: function() {},
				trigger: function(res) {
					console.log(res, 'res');
				}
			});
		},
		/**
		 * 获取地址列表
		 *
		 */
		getAddressList: function(isPage) {
			let that = this;
			if (isPage) {
				that.loadend = false;
				that.page = 1;
				that.$set(that, 'addressList', []);
			}
			if (that.loading) return;
			if (that.loadend) return;
			that.loading = true;
			that.loadTitle = '';
			getAddressList({
				page: that.page,
				limit: that.limit
			})
				.then(res => {
					console.log(res);
					console.log(1);
					let list = res.data.list;
					let loadend = list.length < that.limit;
					that.addressList = that.$util.SplitArray(list, that.addressList);
					that.$set(that, 'addressList', that.addressList);
					that.loadend = loadend;
					that.loadTitle = loadend ? that.i18n.YiLoadMore : that.i18n.LoadMore;
					that.page = that.page + 1;
					that.loading = false;
				})
				.catch(err => {
					that.loading = false;
					that.loadTitle = that.i18n.LoadMore;
				});
		},
		/**
		 * 设置默认地址
		 */
		radioChange: function(e) {
			let index = parseInt(e.detail.value),
				that = this;
			let address = this.addressList[index];
			if (address == undefined)
				return that.$util.Tips({
					title: that.i18n.Bucz
				});
			setAddressDefault(address.address_id)
				.then(res => {
					for (let i = 0, len = that.addressList.length; i < len; i++) {
						if (i == index) that.addressList[i].is_default = true;
						else that.addressList[i].is_default = false;
					}
					that.$util.Tips(
						{
							title: that.i18n.Setcg,
							icon: 'success'
						},
						function() {
							that.$set(that, 'addressList', that.addressList);
						}
					);
				})
				.catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
		},
		/**
		 * 编辑地址
		 */
		editAddress: function(id) {
			let cartId = this.cartId,
				pinkId = this.pinkId,
				couponId = this.couponId;
			this.cartId = '';
			this.pinkId = '';
			this.couponId = '';
			uni.navigateTo({
				url: '/pages/users/user_address/index?id=' + id + '&cartId=' + cartId + '&pinkId=' + pinkId + '&couponId=' + couponId
			});
		},
		/**
		 * 删除地址
		 */
		delAddress: function(index) {
			let that = this,
				address = this.addressList[index];
			if (address == undefined)
				return that.$util.Tips({
					title: that.i18n.Delbcz
				});
			delAddress(address.address_id)
				.then(res => {
					that.$util.Tips(
						{
							title: that.i18n.Delcg,
							icon: 'success'
						},
						function() {
							that.addressList.splice(index, 1);
							that.$set(that, 'addressList', that.addressList);
						}
					);
				})
				.catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
		},
		/**
		 * 新增地址
		 */
		addAddress: function() {
			let cartId = this.cartId,
				pinkId = this.pinkId,
				couponId = this.couponId;
			this.cartId = '';
			this.pinkId = '';
			this.couponId = '';
			uni.navigateTo({
				url: '/pages/users/user_address/index?cartId=' + cartId
			});
		},
		goOrder: function(id) {
			let cartId = '';
			let pinkId = '';
			let couponId = '';
			console.log(id);
			if (this.cartId && id) {
				cartId = this.cartId;
				pinkId = this.pinkId;
				couponId = this.couponId;
				this.cartId = '';
				this.pinkId = '';
				this.couponId = '';
				uni.redirectTo({
					url: '/pages/users/order_confirm/index?is_address=1&cartId=' + cartId + '&addressId=' + id + '&pinkId=' + pinkId + '&couponId=' + couponId
				});
			}
		}
	},
	onReachBottom: function() {
		this.getAddressList();
	}
};
</script>

<style lang="scss" scoped>
.address-management.fff {
	background-color: #fff;
	height: 1300rpx;
}

.address-management .line {
	width: 100%;
	height: 3rpx;
}

.address-management .line image {
	width: 100%;
	height: 100%;
	display: block;
}

.address-management .item {
	background-color: #fff;
	padding: 0 30rpx;
	margin-bottom: 12rpx;
}

.address-management .item .address {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
	font-size: 28rpx;
	color: #282828;
}

.address-management .item .address .consignee {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.address-management .item .address .consignee .phone {
	margin-left: 25rpx;
}

.address-management .item .operation {
	height: 83rpx;
	font-size: 28rpx;
	color: #282828;
}

.address-management .item .operation .radio text {
	margin-left: 13rpx;
}

.address-management .item .operation .iconfont {
	color: #2c2c2c;
	font-size: 35rpx;
	vertical-align: -2rpx;
	margin-right: 10rpx;
}

.address-management .item .operation .iconfont.iconshanchu {
	margin-left: 40rpx;
	font-size: 38rpx;
}
.address-management {
	position: relative;
	.noCommodity {
		width: 400px;
		height: 300px;
		display: table-cell; /*主要是这个属性*/
		vertical-align: middle;
		text-align: center;
	}
}

.address-management .footer {
	position: fixed;
	width: 100%;
	background-color: #fff;
	bottom: 0;
	height: 106rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.address-management .footer .addressBnt {
	// width: 330rpx;
	width: 100%;
	height: 76rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 76rpx;
	font-size: 30rpx;
	color: #fff;
}

.address-management .footer .addressBnt.on {
	width: 690rpx;
	margin: 0 auto;
}

.address-management .footer .addressBnt .iconfont {
	font-size: 35rpx;
	margin-right: 8rpx;
	vertical-align: -1rpx;
}

.address-management .footer .addressBnt.wxbnt {
	background-color: #fe960f;
}
</style>
